<template>
  <div class="main-wrapper">
    <div class="info-box-wrapper">
      <div class="info-box">
        <div class="cpy-admin-box">
          <div class="left-box">
            <img :src="getAvatorUrl(dialogData.cpyadmin?.avator)" alt="用户头像" />
          </div>
          <div class="right-box">
            <div class="item-info">
              <span class="item-info-user"> {{ dialogData.cpyadmin.userName }}</span>
              <el-tag v-if="dialogData.cpyadmin.flagIdentity == 'Y'" type="success" size="small">已认证</el-tag>
              <el-tag v-else type="danger" size="small">未认证</el-tag>
            </div>
            <!-- <div class="item-info">
              <span class="item-info-s">当家币：</span>
              <span class="coin">
                {{ dialogData.cpyadmin.showAvailableCnt || 0.0 }}
              </span>
            </div> -->
            <div class="item-info">
              <el-button
                v-if="dialogData.cpyadmin.userId == dialogData.itemInfo.userId"
                type="primary"
                link
                @click="handleOpenCompnayCoinDetailDialog(OptEnum.VIEW)"
              >
                帐单详情
              </el-button>
            </div>
            <div class="item-info">
              <span class="item-info-s">企业主帐号</span>
            </div>
          </div>
        </div>
        <!-- <div class="item">
          <div class="item-info">
            <span>{{ dialogData.itemInfo.chargeCnt || 0 }}</span>
          </div>
          <div class="item-opt">
            <el-button text type="primary">当月花费</el-button>
          </div>
        </div> -->
      </div>
      <div class="cur-info-box">
        <el-alert title="当家币可用于发岗位、工友沟通" type="success" :closable="false" show-icon />
        <div class="coin-info">
          <div class="left-box">
            <span>当前帐号:</span><span class="info"> {{ dialogData.itemInfo.userName || "" }}</span>
          </div>
        </div>
        <div class="coin-info">
          <div class="left-box">
            <span>当家币：</span>
            <span class="coin">
              {{ dialogData.itemInfo.showAvailableCnt || 0.0 }}
            </span>
          </div>
          <div class="right-box">
            <el-button text type="danger" size="small" @click="handleOpenCharge">去充值</el-button>
          </div>
        </div>
        <div class="coin-info">
          <div class="left-box">
            <el-button type="primary" link @click="handleOpenCompnayUserCoinDetailDialog(OptEnum.VIEW, dialogData.itemInfo)">
              帐单详情
            </el-button>
          </div>
        </div>
        <!-- <div class="tongji-info">放一些当前用户的统计信息，处理中。。。</div> -->
      </div>
    </div>
    <div class="table-box">
      <ProTable ref="pTable" :columns="columns" :request-api="getCompanyUserConfigsApi" :init-param="initParam">
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="CirclePlus" @click="handleOpenDialog(OptEnum.CREATE)">新增企业帐号</el-button>
          <!-- <el-button
            type="primary"
            :icon="Setting"
            @click="handleOpenConfigDialog(OptEnum.EDIT)"
            >配置当家币</el-button
          > -->
        </template>
        <!-- <template #birthDay="scope">
          {{ getAge(scope.row.birthDay) }}
        </template> -->
        <template #userLevel="scope">
          <el-tag :type="scope.row.userLevel === sysEnum.ONE ? '' : 'success'">
            {{ scope.row.userLevel === sysEnum.ONE ? "一级" : scope.row.userLevel === sysEnum.TWO ? "二级" : "" }}
          </el-tag>
        </template>

        <template #flagIdentity="scope">
          <el-tag :type="scope.row.flagIdentity === flagEnum.FLAG_TRUE ? '' : 'danger'">
            {{ scope.row.flagIdentity === flagEnum.FLAG_TRUE ? "已认证" : "未认证" }}
          </el-tag>
        </template>
        <template #flagActive="scope">
          <el-switch
            :model-value="scope.row.flagActive"
            :active-value="activeEnum.ACTIVE"
            :inactive-value="activeEnum.INACTIVE"
            @click="handleChangeActive(scope.row)"
          />
          <el-tag :type="scope.row.flagActive === activeEnum.ACTIVE ? 'primary' : 'danger'" style="margin-left: 5px">
            {{ scope.row.flagActive === activeEnum.ACTIVE ? "启用" : "禁用" }}
          </el-tag>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button type="primary" size="small" link :icon="EditPen" @click="handleOpenDetailDialog(OptEnum.EDIT, scope.row)">
            完善信息
          </el-button>
          <!-- <el-button
            type="primary"
            size="small"
            link
            :icon="Check"
            @click="handleOpenAduitDialog(OptEnum.AUDIT, scope.row)"
            >审核信息</el-button
          > -->
          <!-- :disabled="scope.row.flagConfig !== 'Y'" -->
          <el-button type="primary" size="small" link :icon="Setting" @click="handleOpenConfigDialog(OptEnum.EDIT, scope.row)">
            配置当家币
          </el-button>
          <el-button
            type="primary"
            size="small"
            link
            :icon="Check"
            @click="handleOpenCompnayUserCoinDetailDialog(OptEnum.VIEW, scope.row)"
          >
            帐单流水
          </el-button>
          <el-button type="danger" size="small" link :icon="Delete" @click="handleUnBindAccount(scope.row)">解除绑定</el-button>
          <el-button type="danger" size="small" link :icon="Delete" @click="handleDeleteAccount(scope.row)">删除</el-button>
        </template>
      </ProTable>
      <CompanyUserAduitDialog ref="aduitDialogRef" @refresh-list="handleRefreshList" />
      <CompanyUserPhoneAddDialog ref="dialogRef" @refresh-list="handleRefreshList" />
      <CompanyUserDialog ref="detailDialogRef" @refresh-list="handleRefreshList" />
      <ConfigUserCoinDialog ref="configDialogRef" @refresh-list="handleRefreshInfo" />
      <ChargeDialog ref="chargeDialogRef" @refresh-list="handleRefreshInfo" />
      <CompanyCoinDetailDialog ref="cpycoinDetailDialogRef" />
      <CompanyUserCoinDetailDialog ref="cpyusrcoinDetailDialogRef" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import CompanyUserDialog from "./components/CompanyUserDialog.vue";
import CompanyUserPhoneAddDialog from "./components/CompanyUserPhoneAddDialog.vue";
import CompanyUserAduitDialog from "./components/CompanyUserAduitDialog.vue";
import CompanyCoinDetailDialog from "./components/CompanyCoinDetailDialog.vue";
import CompanyUserCoinDetailDialog from "./components/CompanyUserCoinDetailDialog.vue";
import ConfigUserCoinDialog from "./components/ConfigUserCoinDialog.vue";
import ChargeDialog from "./components/ChargeDialog.vue";
import { CirclePlus, Delete, EditPen, Setting, Check } from "@element-plus/icons-vue";
import { deleteUserApi, changeUserActiveApi, unbindByCompanyApi } from "@/api/modules/sys/user";
import {
  getCompanyUserConfigsApi,
  deleteCompanyUserConfigApi,
  getCompanyAccountInfoApi,
  getCompanyAdminApi
} from "@/api/modules/cpy/act";
import { ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { OptEnum, sysEnum, activeEnum, flagEnum } from "@/biz/eenum/appEnum";
import { CompanyUserConfigVo, CompanyAccountVo } from "@/biz/interface/companyType";
import defaultAvatar from "@/assets/images/davator.png";

//当前帐号的信息
interface CurAccountOption {
  //弹出表单的标题
  title: string;
  //当前的数据对象
  itemInfo: CompanyAccountVo;

  cpyadmin: CompanyUserConfigVo;
}

const pTable = ref();
const initParam = reactive({});

const dialogData = reactive<CurAccountOption>({
  title: "",
  itemInfo: {},
  cpyadmin: {
    userId: "",
    //名称
    userName: "",
    //帐号
    account: "",
    //认证
    flagIdentity: ""
  }
});

// 表格列配置
const columns: Partial<ColumnProps>[] = [
  { type: "selection", width: 80, fixed: "left" },
  { type: "index", label: "#", width: 60 },
  {
    prop: "userLevel",
    label: "层级",
    width: 120
  },
  { prop: "account", label: "帐号" },
  {
    prop: "userName",
    label: "姓名"
  },
  {
    prop: "showAvailableCnt",
    label: "可用当家币"
  },
  {
    prop: "showUsedCnt",
    label: "已用当家币"
  },
  { prop: "flagIdentity", width: 120, label: "认证" },
  {
    prop: "flagActive",
    label: "状态",
    width: 120
  },
  {
    prop: "operation",
    label: "操作",
    width: 340,
    fixed: "right"
  }
];

const getAvatorUrl = (aurl: string) => {
  let url = defaultAvatar;
  if (aurl) {
    url = aurl;
  }
  return url;
};

//刷新数据列表
const handleRefreshList = () => {
  pTable.value.getTableList();
};
//刷新基数信息
const handleRefreshInfo = async () => {
  let { data } = await getCompanyAccountInfoApi({});
  // console.log("接收到服务器端的数据", data);
  if (data) {
    dialogData.itemInfo = data as unknown as CompanyAccountVo;
    // 也刷新一下列表
    handleRefreshList();
  }
};

// 获取企业主帐号的信息
const findCompanyAdminInfo = async () => {
  let { data } = await getCompanyAdminApi({});
  // console.log("接收到服务器端的数据", data);
  if (data) {
    dialogData.cpyadmin = data as unknown as CompanyUserConfigVo;
  }
};

// 删除用户信息
const handleDeleteAccount = async (params: CompanyUserConfigVo) => {
  let res = await useHandleData(deleteCompanyUserConfigApi, params.userId!, `解除【${params.userName}】用户的企业绑定关系`);
  if (res) {
    deleteUserApi( { id: params.userId! }).then(res=>{
      pTable.value.getTableList();
    });
  }
};

// 解除用户绑定信息
const handleUnBindAccount = async (params: CompanyUserConfigVo) => {
  let res = await useHandleData(deleteCompanyUserConfigApi, params.userId!, `解除【${params.userName}】用户的企业绑定关系`);
  if (res) {
    unbindByCompanyApi( { id: params.userId! }).then(res=>{
      pTable.value.getTableList();
    });
  }
};

// 切换用户状态
const handleChangeActive = async (row: CompanyUserConfigVo) => {
  await useHandleData(
    changeUserActiveApi,
    {
      id: row.userId!,
      flagActive: row.flagActive == activeEnum.ACTIVE ? activeEnum.INACTIVE : activeEnum.ACTIVE
    },
    `切换【${row.userName}】用户状态`
  );
  pTable.value.getTableList();
};

onMounted(() => {
  findCompanyAdminInfo();
  handleRefreshInfo();
});

// 打开 充值页面
const chargeDialogRef = ref();
const handleOpenCharge = (optType: OptEnum) => {
  let params = {
    optType: optType
  };
  chargeDialogRef.value.acceptParams(params);
};

// 打开 新增企业帐号
const dialogRef = ref();
const handleOpenDialog = (optType: OptEnum, rowData?: {}) => {
  let params = {
    optType: optType,
    rowData: { id: rowData?.userId }
  };
  dialogRef.value.acceptParams(params);
};

// 打开 新增企业帐号
const detailDialogRef = ref();
const handleOpenDetailDialog = (optType: OptEnum, rowData?: {}) => {
  let params = {
    optType: optType,
    rowData: { id: rowData?.userId }
  };
  detailDialogRef.value.acceptParams(params);
};

// // 打开 新增企业帐号
// const aduitDialogRef = ref();
// const handleOpenAduitDialog = (optType: OptEnum, rowData?: {}) => {
//   let params = {
//     optType: optType,
//     rowData: { id: rowData?.userId },
//   };
//   aduitDialogRef.value.acceptParams(params);
// };

// 打开 配置当家币，设置每个帐号的额度
const configDialogRef = ref();
const handleOpenConfigDialog = (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType: optType,
    rowData: { ...rowData }
  };
  configDialogRef.value.acceptParams(params);
};

// 打开 企业主帐号的流水
const cpycoinDetailDialogRef = ref();
const handleOpenCompnayCoinDetailDialog = (optType: OptEnum) => {
  let params = {
    optType: optType,
    rowData: {}
  };
  cpycoinDetailDialogRef.value.acceptParams(params);
};

// 打开 企业子帐号的流水
const cpyusrcoinDetailDialogRef = ref();
const handleOpenCompnayUserCoinDetailDialog = (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType: optType,
    rowData
  };
  cpyusrcoinDetailDialogRef.value.acceptParams(params);
};
</script>
<style scoped lang="scss">
.main-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;

  .info-box-wrapper {
    // background: #fff;
    height: 160px;
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;

    .info-box {
      flex: 1;
      background: #fff;
      height: 160px;
      display: flex;
      align-items: center;
      // border: 1px solid red;

      .cpy-admin-box {
        // border: 1px solid red;
        width: 300px;
        height: 120px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-left: 15px;

        .left-box {
          height: 100px;
          width: 100px;
          border-radius: 50%;
          // border: 1px solid red;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;

          img {
            height: 100px;
            width: 100px;
          }
        }

        .right-box {
          flex: 1;
          margin-left: 1.2rem;

          .item-info {
            margin: 10px;
            .coin {
              color: red;
              font-weight: 600;
              font-size: 1.2rem;
            }

            .item-info-user {
              font-size: 1.2rem;
              margin-right: 1rem;
              font-weight: 600;
              color: var(--el-color-info);
            }
            .item-info-s {
              font-size: 0.8rem;
              color: var(--el-color-info-light-3);
              font-weight: 600;
            }
          }

          .item-info-box {
            border: 1px solid var(--el);
          }
        }
      }

      .item {
        border: 1px solid red;
        width: 140px;
        height: 100px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: 15px;
        // svg {
        //   width: 50px;
        //   height: 50px;
        // }

        .item-info {
          flex: 1;
          // border: 1px solid red;
          display: flex;
          align-items: center;
          justify-content: center;

          span {
            font-size: 2em;
            font-weight: 600;
            color: red;
          }
        }
        .item-opt {
          height: 40px;
        }
      }
    }

    .cur-info-box {
      width: 400px;
      background: #fff;
      height: calc(100% - 20px);
      margin-left: 10px;
      padding: 10px;
      // border: 1px solid red;

      .coin-info {
        background: var(--el-color-info-light-7);
        font-size: 0.8em;
        color: var(--el-color-info-light-3);
        height: 30px;
        line-height: 30px;
        padding-left: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left-box {
          flex: 1;
          .coin {
            color: #f00;
            font-size: 1.2em;
            font-weight: 600;
          }
          .info {
            color: var(--el-color-primary);
            font-size: 0.8rem;
            font-weight: 600;
            margin-left: 10px;
          }
        }
        .right-box {
          margin-right: 3px;
        }
      }

      .tongji-info {
        margin: 10px 0;
        // border: 1px solid red;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
